<template>
    <div class="violation">
      <div class="header">
        <div><span style="color: darkgrey">首页/</span>信息公告</div>
      </div>
      <div class="subject">
        <table>
          <thead>
            <tr>
              <th style="width: 80px">序号</th>
              <th style="width: 60%">信息公告</th>
              <th>发布时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td class="read-btn">
                <img src="../assets/images/主页/u19.png" alt="" title="" />
              </td>
              <td>{{ item.title }}</td>
              <td>{{ item.time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <style scoped>
  .violation {
    width: 90vw;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    max-width: 1200px;
  }
  
  .header {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .btn {
      border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(32, 201, 164, 1);
    width: 80px;
    height: 20px;
    font-size: 8px;
    color: aliceblue;
  }
  
  .subject {
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid #ebeef5;
    white-space: nowrap;
  }
  
  td:nth-child(2) {
    white-space: normal;
    padding-left: 20px;
  }
  
  th {
    color: #909399;
    font-weight: 500;
    font-size: 14px;
    background: #20c9a4;
  
    color: white;
  }
  
  td {
    font-size: 14px;
    color: #606266;
  }
  
  .check {
    color: #20c9a4;
    cursor: pointer;
  }
  
  tr:hover {
    background-color: #f5f7fa;
  }
  
  .read-btn {
    width: 40px;
    text-align: center;
    cursor: pointer;
  }
  
  .read-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  </style>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: '01',
            title: '【麻城市中心】麻城经济开发区谋家园小学建设项目招标预公告',
            time: '2022-04-13',
          },
          {
            id: '02',
            title: '【麻城市中心】麻城市农村公路管理局招标计划',
            time: '2022-04-13',
          },
          {
            id: '03',
            title: '【麻城市中心】麻城经济开发区谋家园小学及附属幼儿园建设项目招标预公告',
            time: '2022-04-13',
          },
          {
            id: '04',
            title: '【汉川市中心】汉川电厂四期扩建工程电力和水管网络路注改建设工程',
            time: '2022-04-13',
          },
          {
            id: '05',
            title: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)',
            time: '2022-04-13',
          },
          {
            id: '06',
            title: '海头镇宅基村土地发包项目',
            time: '2022-04-13',
          },
          {
            id: '07',
            title: '先锋创业大楼（515-1室）60㎡',
            time: '2022-04-13',
          },
          {
            id: '08',
            title: '烟台市福山区人民政府清洋街道办事处2023年04（至）05月政府采购意向',
            time: '2022-04-13',
          },
          {
            id: '09',
            title: '同江市实验幼儿园2023年05月政府采购意向',
            time: '2022-04-13',
          },
          {
            id: '10',
            title: '保马市第二中学校2023年4月至12月政府采购意向-城乡义务教育补助普通综合经费',
            time: '2022-04-13',
          },
          {
            id: '11',
            title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
            time: '2022-04-13',
          },
          {
            id: '12',
            title: '保马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金',
            time: '2022-04-13',
          },
          {
            id: '13',
            title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
            time: '2022-04-13',
          },
          {
            id: '14',
            title: '保马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
            time: '2022-04-13',
          },
          {
            id: '15',
            title: '【次氯酸钠贮存罐修理】采购公告 附件',
            time: '2022-04-13',
          }
        ]
      }
    }
  }
  </script>